<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 配置管理</el-breadcrumb-item>
                <el-breadcrumb-item>新增配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs type="border-card">

                <el-tab-pane label="请求头|全局变量">

                    <el-tabs style="margin: 0 0 0 10px" v-model="otherShow">
                        <el-tab-pane label="Headers" name="first">
                            <el-table :data="apiMsgData.header" :row-style="{'background-color': 'rgb(250, 250, 250)'}"
                                      :show-header="false" class="h-b-e-a-style"
                                      size="mini"
                                      stripe>
                                <el-table-column header-align="center" label="Key" minWidth="100" property="key">
                                    <template slot-scope="scope">
                                        <el-input placeholder="key" size="mini" v-model="scope.row.key">
                                        </el-input>
                                    </template>
                                </el-table-column>

                                <el-table-column header-align="center" label="Value" minWidth="200" property="value">
                                    <template slot-scope="scope">
                                        <el-input placeholder="value" size="mini" v-model="scope.row.value">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column header-align="center" label="操作" property="value" width="80">
                                    <template slot-scope="scope">
                                        <el-button @click.native="delTableRow('header',scope.$index)"
                                                   icon="el-icon-delete" size="mini"
                                                   type="danger">
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="全局变量" name="second">
                            <el-table :data="apiMsgData.globalVar"
                                      :row-style="{'background-color': 'rgb(250, 250, 250)'}" :show-header="false"
                                      class="h-b-e-a-style"
                                      size="mini"
                                      stripe>
                                <el-table-column header-align="center" label="Key" minWidth="100" property="key">
                                    <template slot-scope="scope">
                                        <el-input placeholder="key" size="mini" v-model="scope.row.key">
                                        </el-input>
                                    </template>
                                </el-table-column>

                                <el-table-column header-align="center" label="type" width="100">
                                    <template slot-scope="scope">
                                        <el-select size="mini" v-model="scope.row.param_type">
                                            <el-option :key="item" :value="item" v-for="item in paramTypes">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>

                                <el-table-column header-align="center" label="Value" minWidth="200" property="value">
                                    <template slot-scope="scope">
                                        <el-input placeholder="value" size="mini" v-model="scope.row.value">
                                        </el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column header-align="center" label="操作" property="value" width="80">
                                    <template slot-scope="scope">
                                        <el-button @click.native="delTableRow('globalVar',scope.$index)"
                                                   icon="el-icon-delete" size="mini"
                                                   type="danger">
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>

                </el-tab-pane>

            </el-tabs>

            <el-row>
                <el-col :span="2">
                    <el-button @click="onSubmit()" type="primary">提交</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button @click="resetForm('form')">取消</el-button>
                </el-col>
            </el-row>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :visible.sync="editVisible" center title="创建配置" width="28%">
            <el-form label-width="120px">
                <el-form-item label="配置名称" required>
                    <el-input clearable v-model="configure_name"></el-input>
                </el-form-item>

                <el-form-item label="编写人员" required>
                    <el-input clearable v-model="author"></el-input>
                </el-form-item>

                <el-form-item label="选择项目" required>
                    <el-select @change="getInterfacesByProjectID(selected_project_id)" placeholder="请选择"
                               v-model="selected_project_id">
                        <el-option :key="key" :label="item.name"
                                   :value="item.id" v-for="(item, key) in project_names">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择接口" required>
                    <el-select placeholder="请选择" v-model="selected_interface_id">
                        <el-option :key="key" :label="item.name" :value="item.id"
                                   v-for="(item, key) in interfaces">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span class="dialog-footer" slot="footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button @click="saveEdit" type="primary">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { add_configure, configures_by_interface_id, interfaces_by_project_id, projects_names } from '../../api/api';

    export default {
        name: 'baseform',
        data: function() {
            return {
                editVisible: false,   // 新增配置弹框是否显示标识
                apiMsgData: {
                    id: null,
                    name: '',
                    header: [{ key: null, value: null }],
                    globalVar: [{ key: null, value: null, param_type: 'string' }]
                },
                bodyShow: 'second',
                otherShow: 'first',
                paramTypes: ['string', 'int', 'float', 'boolean'],
                cell: Object(),
                project_names: [],
                selected_project_id: null,
                selected_interface_id: null,
                selected_configure_id: null,
                configure_name: null,  // 配置名称
                author: '',     // 用例编写人员
                interfaces: [],
                configures: []
            };
        },
        created() {
            this.getProjectNames();
        },
        methods: {
            onSubmit() {
                this.selected_project_id = null;
                this.selected_interface_id = null;
                this.editVisible = true;
            },
            // 处理数据1, 有param_type, 返回js数组
            handleData1(request_data, msg) {
                let data_arr = [];
                for (let i = 0; i < request_data.length; i++) {
                    let key = request_data[i].key;
                    if (!key) {
                        this.$message.error(msg + '的key为空!');
                        return [];
                    }
                    let param_type = request_data[i].param_type;
                    let value = request_data[i].value;
                    if (param_type === 'int') {
                        if (/^\d+$/.test(value)) {
                            value = Number(value);
                        } else {
                            this.$message.error(msg + '不是整数int类型!');
                            return [];
                        }
                    } else if (param_type === 'float') {
                        if (/^[+-]?\d+(\.\d+)?$/.test(value)) {
                            value = Number(value);
                        } else {
                            this.$message.error(msg + '不是小数float类型!');
                            return [];
                        }
                    } else if (param_type === 'boolean') {
                        if (/^(true|True|TRUE|1|0)$/.test(value)) {
                            value = true;
                        } else if (/^(false|False|FALSE|0)$/.test(value)) {
                            value = false;
                        } else {
                            this.$message.error(msg + '不是布尔boolean类型!');
                            return [];
                        }
                    }
                    let one_data = {};
                    one_data[key] = value;
                    data_arr.push(one_data);
                }

                return data_arr;
            },

            // 处理数据2, 无param_type, 返回js对象
            handleData2(request_data, msg) {
                let one_data = {};
                for (let i = 0; i < request_data.length; i++) {
                    let key = request_data[i].key;
                    if (!key) {
                        this.$message.error(msg + '的key为空!');
                        return [];
                    }
                    one_data[key] = request_data[i].value;
                }
                return one_data;
            },

            // 保存编辑
            saveEdit() {
                if (this.configure_name === null) {
                    this.$message.error('配置名称不能为空!');
                    return;
                }

                if (this.author === '') {
                    this.$message.error('编写人员名称不能为空!');
                    return;
                }

                if (this.selected_project_id === null || this.selected_interface_id === null) {
                    this.$message.error('未选择所属项目或者接口!');
                    return;
                }

                let datas = {
                    'name': this.configure_name,           // 配置名称
                    'interface': {
                        'pid': this.selected_project_id,      // 项目ID
                        'iid': this.selected_interface_id      // 接口ID
                    },
                    'author': this.author,         // 配置编写人员
                    'request': {          // 请求信息
                        'config': {
                            'name': this.configure_name,
                            'request': {}
                        }
                    }
                };

                // variables处理
                let variables = this.apiMsgData.globalVar;
                variables.splice(-1, 1);
                if (variables.length !== 0) {
                    let new_data = this.handleData1(variables, '全局变量variables');
                    if (new_data.length === 0) {
                        return;
                    }
                    datas.request.config['variables'] = new_data;
                }

                // headers处理
                let headers = this.apiMsgData.header;
                headers.splice(-1, 1);
                if (headers.length !== 0) {
                    let new_data = this.handleData2(headers, '请求头header');
                    if (new_data.length === 0) {
                        return;
                    }
                    datas.request.config.request['headers'] = new_data;
                }

                // datas.include = JSON.stringify(datas.include);
                datas.request = JSON.stringify(datas.request);
                add_configure(datas)
                    .then(response => {
                        this.editVisible = false;
                        let that = this;
                        this.$message.success(`新增配置成功`);
                        // 1秒钟之后, 执行刷新
                        setInterval(function() {
                            that.$router.go();
                        }, 1000);
                    })
                    .catch(error => {
                        this.editVisible = false;
                        if (typeof error === 'object' && error.hasOwnProperty('name')) {
                            console.log(error);
                            this.$message.error('配置名称已存在');
                        } else {
                            console.log(error);
                            this.$message.error('服务器错误');
                        }
                    });

            },
            getProjectNames() {
                projects_names()
                    .then((response) => {
                        this.project_names = response.data;
                    })
                    .catch(error => {
                        that.$message.error('服务器错误');
                    });
            },
            getInterfacesByProjectID(pro_id) {
                interfaces_by_project_id(pro_id)
                    .then((response) => {
                        this.interfaces = response.data;
                    })
                    .catch(error => {
                        that.$message.error('服务器错误');
                    });
            },
            getConfTestcaseByInterfaceID(interface_id) {
                configures_by_interface_id(interface_id)
                    .then((response) => {
                        this.configures = response.data;
                    })
                    .catch(error => {
                        that.$message.error('服务器错误');
                    });

            },
            delTableRow(type, i) {
                if (type === 'variable') {
                    this.apiMsgData.variable.splice(i, 1);
                } else if (type === 'header') {
                    this.apiMsgData.header.splice(i, 1);
                } else if (type === 'param') {
                    this.apiMsgData.param.splice(i, 1);
                } else if (type === 'globalVar') {
                    this.apiMsgData.globalVar.splice(i, 1);
                } else if (type === 'parameterized') {
                    this.apiMsgData.parameterized.splice(i, 1);
                } else if (type === 'setupHooks') {
                    this.apiMsgData.setupHooks.splice(i, 1);
                } else if (type === 'teardownHooks') {
                    this.apiMsgData.teardownHooks.splice(i, 1);
                }
            },
            addTableRow(type) {
                if (type === 'variable') {
                    this.apiMsgData.variable.push({ key: null, value: null, param_type: 'string' });
                } else if (type === 'header') {
                    this.apiMsgData.header.push({ key: null, value: null });
                } else if (type === 'param') {
                    this.apiMsgData.param.push({ key: null, value: null });
                } else if (type === 'globalVar') {
                    this.apiMsgData.globalVar.push({ key: null, value: null, param_type: 'string' });
                } else if (type === 'parameterized') {
                    this.apiMsgData.parameterized.push({ key: null, value: null });
                } else if (type === 'setupHooks') {
                    this.apiMsgData.setupHooks.push({ key: null });
                } else if (type === 'teardownHooks') {
                    this.apiMsgData.teardownHooks.push({ key: null });
                }
            },
            tempNum(i) {
                this.temp_num = i;
            },
            resetLine() {
                //  重置单元格高度
                this.cell.style.height = '18px';
            },
            showLine(prefix, n) {
                //  获取单元格的滚动条高度，并使单元格为该高度
                this.cell = document.getElementById(prefix + n);
                this.cell.style.height = this.cell.scrollHeight + 'px';
            },
            changeLine() {
                //  当单元格高度和滚动条高度不一致时，改变单元格高度
                if (this.cell.style.height !== this.cell.scrollHeight + 'px') {
                    let i = parseInt(this.cell.style.height.substring(0, this.cell.style.height.length - 2));
                    if (i - this.cell.scrollHeight === 2) {
                        //  为true时，为减少高度操作
                        this.cell.style.height = (i - 18) + 'px';
                    } else {
                        this.cell.style.height = this.cell.scrollHeight + 'px';
                    }

                }
            },
            querySearch(queryString, cb) {
                // 调用 callback 返回建议列表的数据
                cb(this.comparators);
            }
        },
        computed: {
            monitorHeader() {
                return this.apiMsgData.header;
            },

            monitorGlobalVar() {
                return this.apiMsgData.globalVar;
            }

        },
        watch: {
            monitorHeader: {
                handler: function() {
                    if (this.apiMsgData.header.length === 0) {
                        this.addTableRow('header');
                    }
                    if (this.apiMsgData.header[this.apiMsgData.header.length - 1]['key'] || this.apiMsgData.header[this.apiMsgData.header.length - 1]['value']) {
                        this.addTableRow('header');
                    }
                }
                ,
                deep: true
            },
            monitorGlobalVar: {
                handler: function() {
                    if (this.apiMsgData.globalVar.length === 0) {
                        this.addTableRow('globalVar');
                    }
                    if (this.apiMsgData.globalVar[this.apiMsgData.globalVar.length - 1]['key'] ||
                        this.apiMsgData.globalVar[this.apiMsgData.globalVar.length - 1]['value']) {
                        this.addTableRow('globalVar');
                    }
                },
                deep: true
            }

        }
    };
</script>

<style scoped>
    .drag-box {
        display: flex;
        user-select: none;
    }

    .drag-box-item {
        flex: 1;
        /* height: 300px; */
        max-width: 330px;
        min-width: 300px;
        background-color: #eff1f5;
        margin-right: 16px;
        border-radius: 6px;
        border: 1px #e1e4e8 solid;
    }

    .item-title {
        padding: 8px 8px 8px 12px;
        font-size: 14px;
        line-height: 1.5;
        color: #24292e;
        font-weight: 600;
    }

    .item-ul {
        padding: 0 8px 8px;
        height: 300px;
        overflow-y: scroll;
    }

    .item-ul::-webkit-scrollbar {
        width: 0;
    }

    .drag-list {
        border: 1px #e1e4e8 solid;
        padding: 10px;
        margin: 5px 0 10px;
        list-style: none;
        background-color: #fff;
        border-radius: 6px;
        cursor: pointer;
        -webkit-transition: border .3s ease-in;
        transition: border .3s ease-in;
    }

    .drag-list:hover {
        border: 1px solid #20a0ff;
    }

    .drag-title {
        font-weight: 400;
        line-height: 25px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

    .ghost-style {
        display: block;
        color: transparent;
        border-style: dashed
    }

    .el-row {
        margin-bottom: 20px;
        margin-top: 20px
    }

    .el-col {
        border-radius: 4px;
    }

    .h-b-e-a-style {
        background-color: rgb(250, 250, 250);
        /*min-height: 430px;*/
    }
</style>
